<template>
    <div id="fabu">
        <div class="publishBox">
                    <div class="publishBackground">
                    </div>
                    <div class="publishcontainer">
                        <img src="../assets/closeDark.png" class="closeP" @click="sendMsgToParent">
                        <div class="head"><span>发布作业</span></div>
                        <div class="body">
                            <div  class="input">
                                <input placeholder="点击编辑作业名称" v-model="taskName" style="text-align: center;border:none;outline:none;background:rgba(0,0,0,0);width:14vw">
                            </div>
                           <div style="margin-left:8%; margin-top:1vw;">
                               <span style="font-size:1.2vw">班级</span>
                               <el-select v-model="value" clearable placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value"  :value="item.label">
                                    </el-option>
                                </el-select>
                                <span  style="margin-left:1vw;font-size:1.2vw">截至</span>
                                <el-date-picker class="datePicker"  v-model="dataValue" value-format="yyyy-MM-dd"  align="right" type="date"  placeholder="选择日期">
                                </el-date-picker>
                                <div style="margin-top:1vw;font-size:1.2vw;positon:relative">
                                    <span>附件</span>
                                    <input style="cursor: pointer;" class="uploadP" ref="up_fileP" type="file" @change="showNameP($event)">
                                    <span style="text-decoration:underline;color:#a3a3a3;font-size:1vw;margin-right:1.5vw">{{reupload}}</span>
                                    <el-radio v-model="radio" label="1">个人</el-radio>
                                    <el-radio v-model="radio" label="2">团队</el-radio>
                                </div>
                                <div class="showFileNameP" ref="showFileNameP">{{fileNameDivP}}</div>
                                <div class="pButton">
                                    <el-button style="right:23%;"  @click="sendMsgToParent" >取消</el-button>
                                    <el-button  type="primary" @click="publishTack">发布</el-button>
                                </div>
                           </div>
                        </div>
                    </div>
                </div>
    </div>
</template>
<script>
import axios from 'axios'
    export default{
        data(){
            return{
                closeP:0,
                taskName:'',
                reupload:"上传附件",
                fileNameDivP:'',
                radio: '1',
                upath:'',
                props:[
                    "message"
                ],
                options:[],
                value: '',
                dataValue: '',
            }
        },
        props:[
          'publishMess'
        ],
      //子级组件接收信息
        mounted: function () {
          var pMess=new Array();
          for(var i= 1;i<this.publishMess.length; i++){
            var puMess = {};
            puMess.value = this.publishMess[i];
            puMess.label = this.publishMess[i];
            pMess.push(puMess);
          }
          this.options=pMess;
        },
        methods:{
            getcourse(data){
                var puMess = {};
                puMess.value = data.name+data.num;
                puMess.label = data.name+data.num;
                this.options.push(puMess);
            },
            showNameP(even){
                // console.log(this.$refs.up_file.value.split('\\'));
                this.upath = event.target.files[0];
                //console.log(this.upath);
                var nameArr=this.$refs.up_fileP.value.split('\\');
                var filenameP=nameArr[nameArr.length-1];
                this.fileNameDivP=filenameP;
                this.reupload="重新上传";
                console.log(filenameP);
            },
            sendMsgToParent(){
                this.$emit("listenToChildEvent",0)
            },
            publishTack(){
                var _this = this;
                var zipFormData = new FormData();
              zipFormData.append('fileName', this.upath);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
                  zipFormData.append('workName',this.taskName);
                  zipFormData.append('course',this.value);
                  zipFormData.append('endTime',this.dataValue);
                  zipFormData.append('isTeam',this.radio);
            let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
            axios.post('/publish/publishTask',zipFormData,config).then(function (res) {
                  _this.$message({
                    message:res.data.msg,
                     type:'success'
                });
                  _this.sendMsgToParent()
                }).catch(function (err) {
                    console.log(err);
                });
//              setTimeout(this.$emit("listenToChildEvent",0),1000)
            },
            deletePu(data){
              for(var i=0;i<this.options.length;i++){
                if(this.options[i].label==(data.ClassName+data.ClassNum)){
                  this.options.splice(i,1);
//                       this.$refs.
                }
//
              }
            }
       },
    }

</script>
<style>
    .el-radio__inner{
        width: 1.1vw;
        height: 1.1vw
    }
    .el-radio__label{
        font-size: 0.9vw;
        padding: 0 0 0 0.5vw;
    }
    .el-radio+.el-radio{
        margin-left:0.2vw
    }
     .uploadP{
        position: absolute;
        width:8vw;
        height:1vw;
        opacity: 0;
        cursor: pointer;
    }
    .showFileNameP{
        font-size: 0.5vw;
        color: #ccc;
        margin: 0.5vw 0 0 0;
        width: 60%;
        height: 3.2vw;
        overflow-y: hidden;
    }
    #fabu .publishcontainer{
        height: 16vw
    }
    #fabu .el-button{
        bottom: 1vw;

    }
</style>
